@import "common.less";

.detailpage{
  width: 100%;overflow: hidden;color: #000000;font: @font;

  .dtitle{background-color: @color-violet;width: 100%;padding: 22/@rem 0;height: 48/@rem;line-height: 48/@rem;
    .toptit{width: 100%;text-align: center;font-size: 34/@rem;color: @color-white;}
  }

  .dbanner{width: 100%;height: 430/@rem;overflow: hidden;text-align: center;
    .pic{width: 100%;height: 430/@rem;display: inline-block;}
  }

  .contpart{
    width: 100%;overflow: hidden;

    .activitycont{
      width: 94%;padding: 0 3%;background-color: @color-white;overflow: hidden;padding-top: 30/@rem;
      h1,h2{font-size: 36/@rem;padding: 23/@rem 0 37/@rem;padding: 0;}
      .cbox{
        width: 100%;overflow: hidden;color: @color-violet;padding-top: 37/@rem;line-height: 42/@rem;
        .bleft{float: left;font-size: 28/@rem;font-weight: 500;
          .bleftimg{float: left;width: 30/@rem;height: 30/@rem;padding: 5.5/@rem 10/@rem 0 0;}
        }
        .bright{float: right;font-size: 28/@rem;font-weight: 500;
          span{font-size: 28/@rem;font-weight: 500;}
        }
      }
      .article{width: 100%;font-size: 26/@rem;margin: 10/@rem 0 15/@rem;line-height: 47/@rem;max-height: 94/@rem;overflow: hidden;transition:height 0.8s;}


      .clickmore{margin-bottom: 24/@rem;color: @color-violet;font-size: 22/@rem;}
      .explain{
        width:100%;overflow: hidden;
        li{
          width: 100%;height: 88/@rem;line-height: 88/@rem;border-bottom: 1px solid #eeeeee;font-size: 24/@rem;
          img{float: left;width: 30/@rem;height: 30/@rem; padding: 26/@rem 10/@rem 0 0;}
        }
        .one{border-top: 1px solid #eeeeee;}
      }
      .number{
        width: 100%;padding: 27/@rem 0 31/@rem;overflow: hidden;
        .ntitle{
          width: 100%;height: 48/@rem;line-height: 48/@rem;font-size: 28/@rem;color: @color-violet;font-weight: 500;
          img{float: left;width: 30/@rem;height: 30/@rem;padding: 8/@rem 10/@rem 0 0;}
        }
        .ncont{
          width: 100%;height: 108/@rem;
          .people{float: right;color: @color-violet;line-height: 26/@rem;padding-top: 102/@rem;width: 25%;text-align: right;font-size: 22/@rem;}
          .touxs{
            float: left;height: 108/@rem;width: 75%;position: relative;margin-top: 20/@rem;
            li{
              width: 108/@rem;height: 108/@rem;position: absolute;border-radius:30px;overflow: hidden;
              .toux{float:left;width:100%;height: 100%;position: relative;}
            }
          }
        }
      }
    }

    .photopart{
      width: 94%;padding:0 3%;overflow: hidden;background: url("../image/login/hh1.png") center center / cover;margin-bottom: 80/@rem;
      .title{
        width: 100%;overflow: hidden;padding: 24/@rem 0 24/@rem 0;
        .photopartpic{float: left;width: 26/@rem;height: 24/@rem;padding: 14/@rem 10/@rem 0 0; }
        span{float: left;color: @color-violet;font-size: 28/@rem;line-height: 54/@rem;font-weight: 500;}
      }
      .photo{
        width: 100%;overflow:hidden;padding-bottom: 52/@rem;
        .photoimg{
          &.rightNone{padding-right: 0;}
          float: left;width: 23%;height: 150/@rem;padding:0 2.6666% 19/@rem 0;
          .pic{display: block;width: 100%;height: 100%;}
        }
        .four{padding-right: 0;}
      }
    }

    .comment{width: 94%;padding:0 3%;overflow: hidden;
      .title{width: 100%;color: @color-violet;font-size: 34/@rem;padding-top: 60/@rem;line-height: 48/@rem;
        img{float: left;width: 30/@rem;height: 30/@rem;padding: 10/@rem 10/@rem 0 0;}
      }
      ul{
        width: 100%;overflow: hidden;
        li{
          width:100%;overflow: hidden;padding: 38/@rem 0; border-bottom:2px solid #eeeeee;
          img{float: left;width: 15%;padding-right: 3%;}
          .cont{width: 82%;overflow: hidden;
            .contont{
              width: 100%;padding-bottom: 13/@rem;overflow: hidden;
              .name{float: left;color: @color-violet;font-size: 30/@rem;line-height: 42/@rem;}
              .time{float: right;color:#686868;font-size: 20/@rem;line-height: 42/@rem;}
            .message{
              width: 100%;line-height: 47/@rem;font-size: 28/@rem;text-align: left;
            }
            }
          }
        }
      }
    }
  }


  .anniu{
    width: 750/@rem;overflow: hidden;
    li{float: left;height: 100/@rem;line-height: 100/@rem;font-size: 32/@rem;text-align: center;color: #ffffff;}
    .comm{width: 188/@rem;color: @color-violet;}
    .keep{width: 188/@rem;background-color:#5d57c1;}
    .signup{width: 374/@rem;background-color: @color-violet;}
  }

  .signup{display: block;width: 100%;height: 100/@rem;line-height: 100/@rem;font-size: 32/@rem;text-align: center;color: #ffffff;margin-top: 150/@rem;background-color: @color-violet;
  &.false{background-color: #ddd;}
  }

}

//点击报名返回结果弹框
.detailpop{
  position: fixed;top: 0;left: 0;width: 100%;bottom: 0;background-color: rgba(0,0,0,0.8);z-index: 10;
  .detailpop-cont{position: fixed;width: 330/@rem;height: 330/@rem;top: 50%;left: 50%;margin-top: -165/@rem;
    margin-left: -165/@rem;color:#ffffff;z-index: 11;text-align: center;
    background-image: url("../image/login/tankuang.png");background-size: 100% 100%;display: table;
    p{display: table-cell;vertical-align: middle;padding: 30/@rem;line-height: 40/@rem}
  }
}

//点击图片放大显示弹框
.boostimgpop{
  position: fixed;top: 0;left: 0;width: 100%;bottom: 0;background-color: rgba(0,0,0,0.8);z-index: 10;
  .boostimgpop-cont{width: 100%;height: 100%;
  .bgimg{width: 100%;height: 100%;text-align: center;
      .pic{display: inline-block;max-width: 100%;max-height: 100%;vertical-align: middle;}
    }
  }
}


